<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator=">">
            <el-breadcrumb-item >{{$t('设置')}}</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/setting/password' }">{{$t('密码设置')}}</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 个人资料 -->
        <div class="mine-info-card">
            <div style="display: flex;">
                <div style="min-width: 2%;"></div>
                <div>
                    <img style="width: 5.63rem;height: 5.63rem;border-radius: 50%" src="../assets/img/logo/avatar1.png" />
                </div>
                <div style="min-width: 2%;"></div>
                <div style="margin-left: 1rem;">
                    <div style="display: flex;">
                        <div class="info-title">{{ $t('账号id') }}</div>
                        <div class="info-value">{{ mineInfo.invite_code }}</div>
                    </div>
                    <div style="display: flex;">
                        <div class="info-title">{{ $t('账号名') }}</div>
                        <div class="info-value">{{ mineInfo.name }}</div>
                    </div>
                    <div style="display: flex;">
                        <div class="info-title">{{ $t('注册时间') }}</div>
                        <div class="info-value">{{ mineInfo.register_date }}</div>
                    </div>
                </div>
                <div style="min-width: 12%;"></div>
                <div style="margin-left: 1rem;">
                    <div style="display: flex;">
                        <div class="info-title">{{ $t('邮箱') }}</div>
                        <div class="info-value">{{ mineInfo.email }}</div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设置信息 -->
         <div class="set-card">
            <!-- 分段器 -->
            <div class="custom-style" style="width: 25rem;">
                <el-segmented v-model="value" :options="options" block style="background-color: #fff;" @change="segmentChange"></el-segmented>
            </div>
            <div style="display: flex;">
                <div style="min-width: 2%;"></div>
                <!-- 表单 -->
                <div style="margin-top: 1.5rem;">
                    <el-form :model="password" label-width="8rem" style="min-width: 28rem" :rules="rules" ref="ruleForm">
                        <el-form-item :label="formtitle[0]" prop="old_password">
                            <el-input v-model="password.old_password" :placeholder="formtitle[2]"></el-input>
                        </el-form-item>
                        <el-form-item :label="formtitle[1]" prop="new_password">
                            <el-input v-model="password.new_password" :placeholder="formtitle[2]"></el-input>
                        </el-form-item>
                        <el-form-item :label="formtitle[1]" prop="new_password_confirm">
                            <el-input v-model="password.new_password_confirm" :placeholder="formtitle[3]"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 按钮 -->
             <div style="margin: 0 0 0 2%;">
                <el-button class="save-btn" @click="saveInfo()">{{ $t('表单.保存按钮') }}</el-button>
             </div>
         </div>
    </div>
</template>
<script>
import {getUser,resetPassword} from '../apis/user'
import { ElMessage } from 'element-plus';
export default{
    name: 'MyComponent',
    data(){
        //与旧密码相等
        // const checkOldPwd = (rule, value, callback) => {
        //     if(value != null && value !== this.old_password1){
        //         callback(new Error('Old password incorrect！'));
        //     }
        //     callback()
        // };
        return {
            mineInfo:{
                "name": "",
                "invite_code": "",
                "email": "",
                "subscription": "",
                "expired_at": "",
                "is_active": false,
                "register_date":''
            },
            // this.$t('卡')
            options:[this.$t('账号'),this.$t('密码'),],
            value:'Password',
            formtitle:[this.$t('表单.旧密码'),this.$t('表单.新密码'),this.$t('placeholder'),this.$t('placeholder1')],
            password    :{
                old_password:'',
                new_password:'',
                new_password_confirm:'',
            },
            // 旧密码
            old_password1:'',
            rules:{
                old_password:[
                    {required:true,message:'Please input old password',trigger: 'blur'},
                    // {validator:checkOldPwd, trigger: 'blur'}
                ],
                new_password:[
                    {required:true,message:'Please input new password',trigger: 'blur'},
                    {min:8,message: 'At least 8 characters', trigger: 'blur'},
                    {validator:validatePassword,trigger:'blur'}
                ],
                new_password_confirm:[
                    {required:true,message:'Please input new password',trigger: 'blur'},
                    {min:8,message: 'At least 8 characters', trigger: 'blur'},
                    // {validator:chechNewPwd, trigger: 'blur'}
                ]
            }
        }
    },
    created(){
        // this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
    },
    mounted(){
        this.getUserInfo();
        // const additionalData = this.$route.meta.gtmAdditionalEventData || {};
        this.$gtm.trackView({ page: this.$route.path,gtm: this.$route.meta.gtm });
    },
    methods:{
        getUserInfo(){
            getUser().then((res)=>{
                if(res.code == 200 && res.status == 1){
                    console.log(res)
                    this.mineInfo = res.data
                }
            })
        },
        segmentChange(e){
            console.log(e)
            if(e ==="Account"){
                this.$router.push('/setting/mine')
            }else if(e === 'Card'){
                this.$router.push('/setting/pay')
            }
        },
        saveInfo(){ 
            this.$refs.ruleForm.validate((valid)=>{
                if(valid){
                    resetPassword(this.password).then((res)=>{
                        if(res.code == 200 && res.status == 1){
                            ElMessage({
                                message: res.msg,
                                grouping: true,
                                type: 'success',
                            })
                        }
                    })
                }
            })
        }
    }
}
// 两次新密码要一样
// function chechNewPwd(rule,value,callback){
//     if(value != null && value !== this.password.new_password){
//         callback(new Error('Two passwords are inconsistent!'))
//     }
//     callback()
// }
function validatePassword(rule, value, callback){
        const regex = /^(?=.*\d)(?=.*[a-zA-Z])[a-zA-Z\d]+$/;
        if (value!=null && !regex.test(value)) {
            callback(new Error('must contain letters and numbers'));
        } else {
            callback();
        }
}
</script>

<style lang="scss" scoped>
.mine-info-card{
    margin: 1rem 0 0 0;
    padding: 1rem;
    box-sizing: border-box;
    min-width: 74.38rem;
    height: 8.13rem;
    border-radius: 0.31rem;
    background-color: rgba(255, 255, 255, 1);
    color: rgba(22, 93, 255, 1);
    font-size: 0.88rem;
    font-family: Roboto;
    .info-title{
        width: 7.5rem;
        height: 1.88rem;
        line-height: 1.88rem;
        color: rgba(78, 89, 105, 1);
        font-size: 0.88rem;
        text-align: right;
        font-family: AlibabaPuHui-regular;
    }
    .info-value{
        margin-left: 1rem;
        width: 12.5rem;
        height: 1.88rem;
        line-height: 1.88rem;
        color: rgba(16, 16, 16, 1);
        font-size: 0.88rem;
        text-align: left;
        font-family: AlibabaPuHui-regular;
    }
}
.set-card{
    margin: 1rem 0 0 0;
    padding: 1rem;
    box-sizing: border-box;
    min-width: 74.38rem;
    height: 36.5rem;
    border-radius: 0.25rem;
    background-color: rgba(255, 255, 255, 1);
}
.custom-style .el-segmented {
//   --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-color:#1F63FF ;
//   --el-segmented-item-bg-color: #fff;
  --el-segmented-item-selected-bg-color: #F2F3F8;
  --el-border-radius-base: 16px;
}
.save-btn{
    margin: 2rem 0 5rem 9rem;
    width: 5.63rem;
    height: 1.88rem;
    border-radius: 0.25rem;
    background-color: rgba(31, 99, 255, 1);
    color: rgba(255, 255, 255, 1);
    font-size: 0.88rem;
    text-align: center;
    font-family: Roboto;
}
</style>